<template>
  <h2>欢迎回来</h2>
  <el-divider style="width: 300px">
    <span>账号密码登录</span>
  </el-divider>
  <el-form :model="form" :rules="rules">
    <el-form-item prop="user">
      <el-input
        v-model="form.username"
        prefix-icon="User"
        class="Reuse"
        placeholder="请输入用户名"
      />
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="form.password"
        prefix-icon="Lock"
        class="Reuse"
        placeholder="请输入密码"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" plain class="Reuse button" @click="userLogin"
        >登录</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script setup>
import { Login } from "@/api/login.js";
import { useUserStore } from "@/stores/UserStore.js";
import { useRouter } from "vue-router";

const store = useUserStore();
const router = useRouter();
const form = reactive({
  username: "admin",
  password: "admin",
});
const rules = {
  user: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
};

const userLogin = async () => {
  try {
    const { data, status } = await Login(form);
    if (status === 200) {
      store.user.username = form.username;
      store.user.token = data.data.token;
      ElNotification({
        title: "登录成功",
        type: "success",
      });
      router.push("/");
    }
  } catch {
    ElNotification({
      title: "账号密码错误",
      type: "error",
    });
  }
};
</script>

<style scoped>
h2 {
  font-size: 30px;
}

.Reuse {
  width: 250px;
  height: 32px;
  border-radius: 5px;
}

span {
  color: #dcdfe6;
}

.button {
  border-radius: 32px;
  background: #626aef;
  border: none;
}

.button:hover {
  background: #9197f4;
}
</style>
